import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import HighPerformTable from '@/components/HighPerformTable';
import {PlusOutlined} from '@ant-design/icons';
import {Button, Popover} from 'antd';
import APIS from '@/apis';
import URLS from '@/apis/APIUrlDefine';

class NewsManagerPage extends Component<any, any> {
  state = {
    modalVisible: false,
    modalRecord: {title: '', author: '', content: ''}
  }
  actionRef: any;

  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.NewsAPI.GetNewsList({...params, sorter, filter});
  }

  handleUpdateModalVisible(value: boolean) {
  }

  clomns: any = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '封面',
      dataIndex: 'image',
      render: (record: any) => {
        return (
          <Popover
            content={
              <img
                style={{width: 300, height: 'auto'}}
                src={URLS.SERVER_PICTURE_URL + record}
              ></img>
            }
            trigger='click'>
            <a>查看</a>
          </Popover>
        )
      }
    },
    {
      title: '更新时间',
      dataIndex: 'updatedTime',
    },
  ];

  render() {
    return (
      <div>
        <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          handleChangeState={(data, state) => {
            return APIS.NewsAPI.ChangeNewsState({id: data.id, state: state === true ? 1 : 0})
          }}
          additionOptions={[
            {
              title: '查看',
              onClick: record => {
                this.props.history.push({pathname: '/news/show', state: record})
              },
            },
          ]}
          onClickUpdate={record => this.props.history.push(`/news/update?id=${record.id}`)}
          handleDelete={id => {
            return APIS.NewsAPI.DeleteNews({id})
          }}
          toolBarRender={() => [
            <Button key='addArticle' type="primary" onClick={() => this.props.history.push("/news/create")}>
              <PlusOutlined/> 新增新闻
            </Button>,
          ]}
        />
      </div>
    );
  }
}

export default connect()(NewsManagerPage);
